<template>
    <div className="goods-sort">
        <div className="sort">
            <a :class="{active:!sortParams.sortField}" href="javascript:;" @click="changeSort(null)">默认排序</a>
            <a :class="{active:sortParams.sortField === 'publishTime'}" @click="changeSort('publishTime')" href="javascript:;">最新商品</a>
            <a :class="{active:sortParams.sortField==='orderNum'}" @click="changeSort('orderNum')" href="javascript:;">最高人气</a>
            <a :class="{active:sortParams.sortField==='evaluateNum'}" @click="changeSort('evaluateNum')" href="javascript:;">评论最多</a>
            <a @click="changeSort('price')" href="javascript:;">
                价格排序
                <i :class="{active:sortParams.sortMethod==='asc'}" class="arrow up" />
                <i :class="{active:sortParams.sortMethod==='desc'}" class="arrow down" />
            </a>
        </div>
        <div className="check">
            <XtxCheckbox @change="changeCheck" v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox>
            <XtxCheckbox @change="changeCheck" v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheckbox>
        </div>
    </div>
</template>
<script>
import { reactive } from 'vue'

export default {
    name: 'GoodsSort',
    setup (props, { emit }) {
        const sortParams = reactive({
            inventory: false,
            onlyDiscount: false,
            sortField: null,
            sortMethod: ''
        })

        function changeSort (sortField) {
            if (sortField === 'price') {
                sortParams.sortField = sortField
                if (!sortParams.sortMethod) {
                    // 第一次点击的时候默认是降序
                    sortParams.sortMethod = 'desc'
                } else {
                    sortParams.sortMethod = sortParams.sortMethod === 'desc' ? 'asc' : 'desc'
                }
            } else {
                sortParams.sortField = sortField
                sortParams.sortMethod = ''
            }
            emit('sort-change', sortParams)
        }

        function changeCheck () {
            emit('sort-change', sortParams)
        }

        return {
            sortParams,
            changeSort,
            changeCheck
        }
    }
}
</script>
<style scoped lang="less">
.goods-sort {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .sort {
        display: flex;

        a {
            height: 30px;
            line-height: 28px;
            border: 1px solid #e4e4e4;
            padding: 0 20px;
            margin-right: 20px;
            color: #999;
            border-radius: 2px;
            position: relative;
            transition: all .3s;

            &.active {
                background: @xtxColor;
                border-color: @xtxColor;
                color: #fff;
            }

            .arrow {
                position: absolute;
                border: 5px solid transparent;
                right: 8px;

                &.up {
                    top: 3px;
                    border-bottom-color: #bbb;

                    &.active {
                        border-bottom-color: @xtxColor;
                    }
                }

                &.down {
                    top: 15px;
                    border-top-color: #bbb;

                    &.active {
                        border-top-color: @xtxColor;
                    }
                }
            }
        }
    }

    .check {
        .xtx-checkbox {
            margin-left: 20px;
            color: #999;
        }
    }
}
</style>
